<html>

<head>
<meta charset="UTF-8">
<title>super pop window</title>
<script type="text/javascript" src="spPop.js"></script>
<script type="text/javascript" src="ParserUrl.js"></script>
</head>

<body>
    <div>
    <button id="alert-button">显示alert</button>
    <button id="show-button">显示弹窗</button>
    <button id="add-alt-button">添加小号</button>
    <button id="edit-alt-button">编辑小号</button>
    </div>

    <p/>

    <div style="border:1px solid red;">
    <p/>
    <label>输入网址：</label>
    <input id="paser-input" value="https://git.oschina.net/" style="width:90%;"/><p/>
    <label>网站图片：</label>    
    <img id="paser-img" src="https://git.oschina.net/favicon.ico"/><p/>
    <button id="paser-button">解析图片</button>
    </div>
</body>

<script type="text/javascript">

document.getElementById("show-button").addEventListener("click", function(e) {
    
    var sp = new spPop();
    sp.width = document.body.clientWidth * 0.4;
    sp.height = document.body.clientHeight * 0.6;
    sp.background = "red";
    sp.opacity = 0.3;
    sp.borderRadius = 10;
    sp.innerHTML = '<div style="height:100%;width:100%;background:yellow;"><button id="close-button">关闭</button></div>';
    sp.Show();

    document.getElementById("close-button").addEventListener("click", function(e) {
        sp.Close();
    });

});

document.getElementById("alert-button").addEventListener("click", function (e) {
    alert("this is a alert!");
});

document.getElementById("paser-button").addEventListener('click', function(e) {
    var url = document.getElementById("paser-input").value;
    var u = ParseURL(url);
    var logo = document.getElementById("paser-img");
    logo.src = u.favicon;
    RotateImg(logo);
});

function RotateImg(obj) {
    obj.animate({
        transform: ['none', 'rotate(-10turn)'],
    }, /** @type {!KeyframeEffectOptions} */({
        duration: 500,
        easing: 'cubic-bezier(1, 0, 0, 1)',
    }));
}

var logo = document.getElementById('paser-img');
logo.addEventListener('click', function(e) {
    RotateImg(logo);
});

</script>
<script type="text/javascript" src="addAlt.js"></script>

</html>